<style>
</style>

<section id="legend-code-multi">
	<div id="legendCodeMulti"></div>

<pre><code class="language-javascript" data-noescape data-trim>
linearGradient<span class="fragment" data-fragment-index="1">.selectAll("stop") 
    .data([                             
        {offset: "0%",    color: "#2c7bb6"}, 
        {offset: "12.5%", color: "#00a6ca"},
        {offset: "25%",   color: "#00ccbc"},
        {offset: "37.5%", color: "#90eb9d"},   
        {offset: "50%",   color: "#ffff8c"}, 
        {offset: "62.5%", color: "#f9d057"}, 
        {offset: "75%",   color: "#f29e2e"}, 
        {offset: "87.5%", color: "#e76818"},        
        {offset: "100%",  color: "#d7191c"}    
      ])                  
    .enter().append("stop")</span>
    <span class="fragment" data-fragment-index="2">.attr("offset", d => d.offset )   
    .attr("stop-color", d => d.color )</span>

//Select the rectangle and fill with gradient
d3.select("#legend-rectangle")
    .style("fill", "url(#linear-gradient)")
</code></pre>
</section>